/*
 * @Author: your name
 * @Date: 2020-09-22 08:58:57
 * @LastEditTime: 2020-09-22 11:13:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \PipeOneMap_WebClient\src\app\g2share\component\g2-grouphistogram\g2-grouphistogram.component.ts
 */
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { v4 as uuidv4 } from 'uuid';
// data数据格式
// const data = [
//   { type: 'London', name: 'Jan.', value: 18.9 },
//   { type: 'London', name: 'Feb.', value: 28.8 },
//   { type: 'London', name: 'Mar.', value: 39.3 },
//   { type: 'London', name: 'Apr.', value: 81.4 },
//   { type: 'London', name: 'May', value: 47 },
//   { type: 'London', name: 'Jun.', value: 20.3 },
//   { type: 'London', name: 'Jul.', value: 24 },
//   { type: 'London', name: 'Aug.', value: 35.6 },
//   { type: 'Berlin', name: 'Jan.', value: 12.4 },
//   { type: 'Berlin', name: 'Feb.', value: 23.2 },
//   { type: 'Berlin', name: 'Mar.', value: 34.5 },
//   { type: 'Berlin', name: 'Apr.', value: 99.7 },
//   { type: 'Berlin', name: 'May', value: 52.6 },
//   { type: 'Berlin', name: 'Jun.', value: 35.5 },
//   { type: 'Berlin', name: 'Jul.', value: 37.4 },
//   { type: 'Berlin', name: 'Aug.', value: 42.4 },
// ];

@Component({
  selector: 'app-g2-grouphistogram',
  templateUrl: './g2-grouphistogram.component.html',
  styleUrls: ['./g2-grouphistogram.component.scss']
})
export class G2GrouphistogramComponent implements OnInit, OnChanges {

  @Input() data = null;
  id = uuidv4();
  charts = null;
  constructor() { }

  ngOnInit() {
  }
  configureChart(chart) {
    this.charts = chart;
    this.charts.data(this.data);
    this.charts.scale('value', {
      nice: true,
    });
    this.charts.tooltip({
      showMarkers: false,
      shared: true,
    });

    this.charts
      .interval()
      .position('name*value')
      .color('type').size(26)
      .adjust([
        {
          type: 'dodge',
          marginRatio: 0,
        },
      ]);

    this.charts.interaction('active-region');

    this.charts.render();
  }
  ngOnChanges(changes: SimpleChanges) {
    if (this.charts) {
      this.charts.changeData(changes.data.currentValue);
      this.charts.render();
    }
  }
}
